import React, { Component } from 'react';

class Demo extends Component{
  state = {}
  constructor(props){
    super(props);
    console.log("--Demo组件中的constructor");
  }
  static getDerivedStateFromProps(props,state){
    console.log("--Demo组件中的getDerivedStateFromProps");
    return null;
  }
  render(){
    console.log("--Demo组件中的render方法");
    return <h1>Demo组件</h1>
  }
  componentDidMount(){
    console.log("--Demo组件中的componentDidMount");
  }
}

class App extends Component {
  state = {}
  constructor(props){
    super(props);
    console.log("1. 执行App组件中 constructor");
  }
  static getDerivedStateFromProps(props,state){
    console.log("2. 执行App组件中的 getDerivedStateFromProps");
    return null;
  }
  render() {
    console.log("3. 执行App组件中的 render函数");
    return (
      <div>
        <Demo></Demo>
      </div>
    );
  }
  componentDidMount(){
    console.log("4. 执行 App中的componentDidMount方法");
  }
}

export default App;
